<template>
    <h2 style="text-align: center;">日志管理</h2>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">基础数据</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>日志管理</el-breadcrumb-item>
   </el-breadcrumb>

   <!-- 搜索框 -->
   <div style="border: 1px solid #545c64; margin: 10px 10px;padding: 20px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="日志时间">
                <el-date-picker
                    v-model="formInline.CreateTime"
                    type="date"
                    placeholder="请选择时间"
                    value-formant="YYYY-MM-DD"
                    clearable
                />
            </el-form-item>

            <el-form-item label="创建人">
                <el-input v-model="formInline.CreateName" placeholder="请输入创建人" clearable />
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" @click="GetLog">查询</el-button>
                <el-button type="danger"  @click="reset">重置</el-button>
            </el-form-item>
    </el-form>
   </div>

   <!-- 显示数据部分 -->
   <div style="border: 1px solid #ccc; margin: 20px 10px;padding: 20px;">
        <el-table :data="Info" style="width: 100%">
            <el-table-column fixed type="index" label="序号" width="120" />
            <el-table-column prop="Id" label="日志编号" width="150" />
            <el-table-column prop="CreateTime" label="操作时间" width="180" >
                <template v-slot="setup">
                    {{ setup.row.CreateTime.substring(0,10) }}
                </template>
            </el-table-column>

            <el-table-column prop="CreateName" label="操作人" width="100" />
            <el-table-column prop="Log_Content" label="操作内容" width="300" />

            <el-table-column fixed="right" label="Operations" min-width="120">
            <template #default>
                <el-button link type="primary" size="small" @click="handleClick">
                Detail
                </el-button>
                <el-button link type="primary" size="small">Edit</el-button>
            </template>
            </el-table-column>
        </el-table>
   </div>
   
   <!-- 分页部分 -->
   <div class="demo-pagination-block">
        <el-pagination
            v-model:current-page="PgaeInfo.index"
            v-model:page-size="PgaeInfo.size"
            :page-sizes="[3,4,5,6,7]"
            :size="PgaeInfo.size"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="PgaeInfo.zongtiao"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
  </div>
</template>


<script lang="ts" setup>
    import axios from 'axios'
    import { ref,reactive,onMounted } from 'vue'

    //显示响应式数据
    const Info=ref([])
    //分页响应式数据
    const PgaeInfo=ref({
        index:1,
        size:3,
        zongtiao:0,
        zongpgae:"",
    })
    const background = ref(true)
    const disabled = ref(false)

    const handleSizeChange = (val: number) => {
        PgaeInfo.value.size=val;
        GetLog();
    }
    const handleCurrentChange = (val: number) => {
        PgaeInfo.value.index=val;
        GetLog();
    }
    //查询条件
    const formInline = reactive({
        CreateTime:"",
        CreateName:"",
    })
    onMounted(()=>{
        GetLog();
    })
    //查询按钮
    const GetLog = () => {
        axios.get("http://localhost:5192/api/Log/GetLog",
            {
                params:{
                    CreateTime:formInline.CreateTime,
                    CreateName:formInline.CreateName,
                    index:PgaeInfo.value.index,
                    size:PgaeInfo.value.size
                }
            }
        )
        .then(res=>{
            if(res.data.Code==200)
            {
                Info.value=res.data.Plist;//分页数据
                PgaeInfo.value.zongpgae=res.data.ZongPgae;//总页数
                PgaeInfo.value.zongtiao=res.data.ZongTiao;//总条数
            }
        })
    }
    //重置
    const reset=()=>{
        formInline.CreateName="";
        formInline.CreateTime="";
    }
    const handleClick = () => {
        console.log('click')
    }
</script>





<style>
    .demo-form-inline .el-input {
    --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
    --el-select-width: 220px;
    }
    .demo-pagination-block + .demo-pagination-block {
        margin-top: 10px;
    }
    .demo-pagination-block .demonstration {
        margin-bottom: 16px;
    }
</style>
